[LG-5098] feat(CodeEditor): adds custom search panel #3186
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: d743a1b The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Size Change: +4.92 kB (+0.31%) Total Size: 1.59 MB
ℹ️ View Unchanged
|
…ality and styling - Added the SearchForm component to the CodeEditor, featuring a toggle button for expanding and collapsing the search input. - Integrated LeafyGreen UI components for consistent styling and functionality. - Created a new story for SearchForm in Storybook to demonstrate its usage and appearance. - Updated CodeEditor to include the SearchForm, enhancing user interaction capabilities.
tsck
force-pushed
the
LG-5098/ce-search
branch
from
9a9de87 to
4e628f3
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR adds a custom search panel to the CodeEditor component that replaces CodeMirror's default search UI with one that matches LeafyGreen's design language. The new search panel includes all the same functionality as the built-in panel (find, replace, case sensitivity, regex, etc.) but with improved styling and UX consistency.
- Introduces a custom SearchPanel component with React-based UI controls
- Adds an
enableSearchPanelprop to allow consumers to control search functionality - Conditionally loads the CodeMirror search module only when search is enabled
Reviewed Changes
Copilot reviewed 16 out of 17 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/code-editor/src/SearchPanel/ | New SearchPanel component with React UI and styles |
| packages/code-editor/src/CodeEditor/CodeEditor.tsx | Integrates custom search panel with conditional loading |
| packages/code-editor/src/CodeEditor/hooks/useModuleLoaders.ts | Makes search module loading conditional based on enableSearchPanel prop |
| packages/code-editor/src/CodeEditor/CodeEditor.types.ts | Adds enableSearchPanel prop and updates CSS selectors |
| packages/code-editor/src/CodeEditor/hooks/extensions/useThemeExtension.ts | Updates styling to accommodate the new search panel |
| packages/code-editor/src/CodeEditor/CodeEditor.spec.tsx | Comprehensive test coverage for search panel functionality |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
| baseFontSize={baseFontSizeProp || baseFontSize} | ||
| darkMode={darkMode} | ||
| // CodeMirror looks for this attribute to refocus when CMD+F is pressed and the panel is already open | ||
| main-field="true" |
There was a problem hiding this comment.
The attribute main-field should use kebab-case naming convention. Consider using data-main-field or aria-main-field to follow HTML standards for custom attributes.
Suggested change
| main-field="true" | |
| data-main-field="true" |
Copilot uses AI. Check for mistakes.
| <div | ||
| className={replaceSectionStyles} | ||
| // @ts-expect-error - react type issue: https://github.com/facebook/react/pull/24730 | ||
| inert={!isOpen ? 'inert' : undefined} |
There was a problem hiding this comment.
The inert attribute should be a boolean, not a string. Use inert={!isOpen} instead of inert={!isOpen ? 'inert' : undefined}.
Suggested change
| inert={!isOpen ? 'inert' : undefined} | |
| inert={!isOpen} |
Copilot uses AI. Check for mistakes.
Comment on lines
+323
to
+330
| const { createRoot } = require('react-dom/client'); | ||
| const root = createRoot(dom); | ||
| root.render(searchPanelElement); | ||
|
|
||
| return { | ||
| dom, | ||
| top: true, | ||
| unmount: () => root.unmount(), |
There was a problem hiding this comment.
Using require() inside a function can impact tree-shaking and bundling optimization. Consider using dynamic imports with import() or moving this to a top-level conditional import.
Suggested change
| const { createRoot } = require('react-dom/client'); | |
| const root = createRoot(dom); | |
| root.render(searchPanelElement); | |
| return { | |
| dom, | |
| top: true, | |
| unmount: () => root.unmount(), | |
| // Use a placeholder while loading react-dom/client dynamically | |
| let root: any = null; | |
| (async () => { | |
| const { createRoot } = await import('react-dom/client'); | |
| root = createRoot(dom); | |
| root.render(searchPanelElement); | |
| })(); | |
| return { | |
| dom, | |
| top: true, | |
| unmount: () => { | |
| if (root) { | |
| root.unmount(); | |
| } | |
| }, |
Copilot uses AI. Check for mistakes.
| line: 1, | ||
| column: 1, | ||
| content: 'Error message', | ||
| messages: ['Error message'], |
There was a problem hiding this comment.
The test is updating from content to messages array, but this change should be documented or explained in the context of the search panel feature. This appears to be an unrelated API change.
Suggested change
| messages: ['Error message'], | |
| content: ['Error message'], |
Copilot uses AI. Check for mistakes.
| | `enableCodeFolding` _(optional)_ | Enables code folding arrows in the gutter. | `boolean` | `undefined` | | ||
| | `enableLineNumbers` _(optional)_ | Enables line numbers in the editor’s gutter. | `boolean` | `true` | | ||
| | `enableLineWrapping` _(optional)_ | Enables line wrapping when the text exceeds the editor’s width. | `boolean` | `true` | | ||
| | `enableSearchPanel` \_(optional)) | Enables the find and replace search panel in the editor. | `boolean` | `true` | |
There was a problem hiding this comment.
Corrected extra parenthesis and underscore formatting in the table row.
Suggested change
| | `enableSearchPanel` \_(optional)) | Enables the find and replace search panel in the editor. | `boolean` | `true` | | |
| | `enableSearchPanel` _(optional)_ | Enables the find and replace search panel in the editor. | `boolean` | `true` | |
Copilot uses AI. Check for mistakes.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✍️ Proposed changes
CodeEditorcomponent. Contains all of the same functionality that was in the built in panel but matches the LG design language.🎟 Jira ticket: LG-5098
✅ Checklist
For bug fixes, new features & breaking changes
pnpm changesetand documented my changes🧪 How to test changes